<template>
  <div v-if="insq"></div>
  <div
    v-else
    class="login_register"
    :style="{height: deviceHei + 'px',backgroundImage: 'url('+https( baseRegImg) +')'}"
  >
    <div class="btn_arrow flex nav-top">
      <div class="registReturn" @click="gotoBack()">
        <span v-if="showPanel == 1?false:true"><</span>
        
        <span v-if="showPanel == 1?true:false">x</span>
      </div>
      <!-- <div v-if="!$root.ISWX" @click="gotoHome()" class="closePage" >
              <span class="">x</span>
          </div>
      class="wx_back"-->
      <div v-if="showPanel == 1?false:true" class="closePage" @click="gotoHome()">
        <span>x</span>
      </div>
    </div>
    <div class="logReg_panel" v-if="showPanel == 1">
      <div class="errorInfo">
        <p class="titleP">登录</p>
        <span>{{errorInfo}}</span>
      </div>
      <!-- <p class="title_panel">{{pwdValicodeLogin?'账号登录':'手机号码'}}</p> -->
      <p class="title_panel">手机号码</p>
      <form class="log_reg">
        <label>
          <span class="country_code" @click="goToCountry()">
            {{currentCode}}
            <em></em>
          </span>
          <input
            type="number"
            @blur="focusstate=false"
            v-focus="focusstate"
            placeholder="请输入手机号码"
            v-model="loginUser.mobile"
            autofocus
          >
        </label>
        <template v-if="pwdValicodeLogin">
          <!-- v-focus="focusstate" -->
          <label>
            <input type="password" placeholder="请输入密码" v-model="loginUser.password">
          </label>
        </template>
        <template v-else>
          <div class="classGetCode">
            <label class="labelCur">
              <input
                type="number"
                v-focus="!focusstate"
                @blur="focusstate=true"
                placeholder="请输入验证码"
                v-model="loginUser.validcode"
              >
            </label>
            <span
              class="iden_btn specialBgCode"
              @click="getValiCode(1)"
              :class="checkphoneloginUser?'loginCurrent':''"
            >{{valiWords}}</span>
          </div>
        </template>
      </form>
      <p class="options_log">
        <span v-if="pwdValicodeLogin" @click="switchLoginStyle()">验证码登录&nbsp;></span>
        <span v-else @click="switchLoginStyle()">密码登录&nbsp;></span>
        <span class="forg_pwd" v-if="pwdValicodeLogin" @click="changeShowPanel(3)">忘记密码?</span>
      </p>
      <p class="btns_logReg">
        <span class="log_btn" @click="loginIn()">登录</span>
        <span class="reg_btn" @click="changeShowPanel(2)">注册</span>
      </p>
    </div>
    <div class="logReg_panel" v-else-if="showPanel == 2">
      <div class="errorInfo">
        <p class="titleP">注册</p>
        <span>{{errorInfo}}</span>
      </div>
      <p class="title_panel">手机号码</p>
      <form class="log_reg">
        <label>
          <span class="country_code" @click="goToCountry()">
            {{currentCode}}
            <em></em>
          </span>
          <input
            type="number"
            @blur="reGfocusstate=false"
            v-focus="reGfocusstate"
            placeholder="请输入手机号码"
            v-model="registerUser.mobile"
          >
        </label>
        <div class="classGetCode">
          <label class="labelCur">
            <input
              type="number"
              v-focus="!reGfocusstate"
              @blur="reGfocusstate=true"
              placeholder="请输入验证码"
              v-model="registerUser.validcode"
            >
          </label>
          <span
            class="iden_btn"
            @click="getValiCode(2)"
            :class="checkphoneregisterUser?'regCurrent':''"
          >{{regValiWords}}</span>
        </div>

        <!-- <label>
                  <input type="password" placeholder="请设置密码" v-model="registerUser.password">
              </label>
              <label>
                  <input type="password" placeholder="请再次输入密码" v-model="registerUser.repassword">
        </label>-->
        <p class="confirm_btn" @click="registerNum()">注册</p>
        <p class="tips_pan reg-privacy">
          点击[注册]代表你已阅读同意
          <span @click="goPrivacy">《用户服务协议》</span>
        </p>
      </form>
    </div>
    <div class="logReg_panel" v-else-if="showPanel == 3">
      <div class="errorInfo">
        <p class="titleP">忘记密码</p>
        <span>{{errorInfo}}</span>
      </div>
      <p class="title_panel">手机号码</p>
      <form class="log_reg">
        <label>
          <span class="country_code" @click="goToCountry()">
            {{currentCode}}
            <em></em>
          </span>
          <input type="number" placeholder="请输入手机号码" v-model="forgetUser.mobile">
        </label>
        <div class="classGetCode">
          <label class="labelCur">
            <input type="number" placeholder="请输入验证码" v-model="forgetUser.validcode">
          </label>
          <span
            class="iden_btn"
            :class="forgetpassword?'forgetpassword':''"
            @click="getValiCode(3)"
          >{{fogtValiWords}}</span>
        </div>
        <label>
          <input type="password" placeholder="请设置密码" v-model="forgetUser.password">
        </label>
        <label>
          <input type="password" placeholder="请再次输入密码" v-model="forgetUser.repassword">
        </label>
        <p class="confirm_btn" @click="findPassword()" style="margin-top:30px;">确认</p>
      </form>
    </div>

    <div v-if="iswx">
      <div class="line_left"></div>
      <div class="third_login">使用第三方登录</div>
      <div class="line_right"></div>
    </div>
    <div class="login_icon" v-if="iswx">
      <div class="wx_login" @click="wxLogin('weixin://')">
        <img src="../../static/img/logo_weixin.png" v-show="showIcon == 0 || showIcon == 2">
        <img src="../../static/img/yellow_weixin.png" v-show="showIcon == 1">
        <div>
          <img class="last_login_icon" src="../../static/img/last_login.png" v-show="showIcon == 1">
        </div>
      </div>
      <!-- <div class="qq_login" @click.stop="qqLogin()" id="qq">
        <img src="../../static/img/logo_qq.png"  v-show="showIcon == 0 || showIcon == 1">
        <img src="../../static/img/yellow_qq.png" v-show="showIcon == 2">
        <div><img class="last_login_icon" src="../../static/img/last_login.png" v-show="showIcon == 2"></div>
      </div>-->
    </div>

    <div class="login_mask" v-show="showPanel == 4" @touchmove.prevent>
      <div class="login_box">
        <img class="close_btn" src="../../static/img/icon_close.png">
        <div>
          <div class="errorInfo">
            <p class="third_titleP">绑定手机号</p>
          </div>
          <form class="log_reg">
            <label>
              <span class="country_code" @click="goToCountry()">
                {{currentCode}}
                <em></em>
              </span>
              <input
                type="number"
                @blur="thdfocusstate=false"
                v-focus="thdfocusstate"
                placeholder="请输入手机号码"
                v-model="thirdLoginUser.mobile"
              >
            </label>
            <div class="classGetCode">
              <label class="labelCur">
                <input
                  type="number"
                  v-focus="!thdfocusstate"
                  @blur="thdfocusstate=true"
                  placeholder="请输入验证码"
                  v-model="thirdLoginUser.validcode"
                >
              </label>
              <span class="third_error">{{errorInfo}}</span>
              <span
                class="iden_btn"
                @click="getValiCode(4)"
                :class="checkphoneThirdLoginUser?'regCurrent':''"
              >{{thdValiWords}}</span>
            </div>
            <p class="third_tips_pan reg-privacy">
              点击[注册]代表你已阅读同意
              <span @click="goPrivacy">《用户服务协议》</span>
            </p>
            <p class="third_btn" @click="thirdLoginNum()">注册</p>
          </form>
        </div>
      </div>
    </div>

    <div class="login_mask" v-show="showPanel == 5" @touchmove.prevent>
      <div class="sexual_box">
        <div>
          <div class="errorInfo">
            <p class="sexual_titleP">请选择您的性别</p>
            <p class="sexual_info">以便我们为您提供更好的服务</p>
          </div>
          <div>
            <div class="sexual_m">
              <img class="sexual_icon" src="../../static/img/image_male.png">
              <p class="sexual_btn" @click="chooseSexual(0)">我是潮男</p>
            </div>
            <div class="sexual_f">
              <img class="sexual_icon" src="../../static/img/image_female.png">
              <p class="sexual_btn" @click="chooseSexual(1)">我是女神</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { MD5, Checking } from "../common/util";
import { AntiBrush } from "../common/anti-brush";
import * as api from "../common/api/user";
import { mapGetters } from "vuex";
import { weixinApp } from "../common/api/oauthAPI";

const tdAdRegister = uid => {
  window.TDH5SDK && window.TDH5SDK.account.register(uid);
};
const dom = window.document;
const body = dom.querySelector("body");
const MemberPathKey = "MEMBER_DO_LOGIN_PATH";
var fromPath = "";
export default {
  data() {
    return {
      deviceHei: "",
      currentCode: "",
      pwdValicodeLogin: false,
      showPanel: 1, // 1：账号登录面板 2：注册面板 3：忘记密码面板 4:绑定手机号弹窗 5：选择性别弹窗
      showIcon: 0, // 0：无上次使用 1：上次使用为微信 2：上次使用为qq
      valiWords: "获取验证码",
      fogtValiWords: "获取验证码",
      regValiWords: "获取验证码",
      thdValiWords: "获取验证码",
      loginUser: {},
      registerUser: {},
      thirdLoginUser: {},
      forgetUser: {},
      timeRun: {},
      focusstate: true,
      reGfocusstate: true,
      thdfocusstate: true,
      forfocusstate: true,
      errorInfo: "" // 报错信息
    };
  },
  computed: {
    ...mapGetters({
      insq: "insq",
      baseValue: "baseValue",
      userInfo: "userInfo",
      selectCountryCode: "selectCountryCode"
    }),
    iswx() {
      return this.$root.ISWX;
    },
    checkphoneloginUser() {
      return Checking(this.loginUser.mobile, "phone");
    },
    checkphoneregisterUser() {
      return Checking(this.registerUser.mobile, "phone");
    },
    checkphoneThirdLoginUser() {
      return Checking(this.thirdLoginUser.mobile, "phone");
    },
    forgetpassword() {
      //  forgetUser.mobile
      return Checking(this.forgetUser.mobile, "phone");
    },
    baseRegImg() {
      let bv = this.baseValue;
      return (bv.configs && bv.configs.registerbgimg) || "";
    }
  },
  beforeRouteEnter(to, from, next) {
    console.log("------------>", to, from);
    let { fullPath, name } = from,
      member = localStorage.getItem(MemberPathKey);
    if (!/login/i.test(fullPath) && name !== null)
      localStorage.setItem(MemberPathKey, fullPath);

    fromPath = window.location.origin + from.fullPath;
    next();
  },
  created() {
    this.changeShowIcon();
    console.log(this.showIcon);
  },
  mounted() {
    console.log(window.location);
    this.wx_code();
    if (this.insq) this.$router.go(-1);
    // console.log(this.$route, this.$router, "root");
    if (!this.baseValue.configs) this.$store.dispatch("setBaseValue");
    // if (this.$root.ISWX) {
    //   if (window.location.href.indexOf("code") < 0) {
    //     var path = window.location.origin + window.location.pathname;
    //     var link = weixinApp.get_authorize_base_link(path, "weixinJ");
    //     window.location = link;
    //   }
    //   this.wx_code()
    // }
    this.currentCode = this.selectCountryCode;
    this.deviceHei = document.documentElement
      ? document.documentElement.clientHeight
      : document.body.clientHeight;
  },
  methods: {
    goPrivacy() {
      this.$router.push("/privacy");
    },
    changeShowIcon() {
      var lastlogin = this.getCookie("lastlogin");
      if (lastlogin) {
        this.showIcon = lastlogin;
      }
    },
    wxLogin(url) {
      var registertype = 0;
      var timeout,
        t = 1000,
        hasApp = true;
      // setTimeout(function () {
      //   if (!hasApp) {
      //     // 没有安装微信
      //     var r=confirm("您没有安装微信，请先安装微信!");
      //     if (r==true){
      //         location.href="http://weixin.qq.com/"
      //     }
      //     }else{
      //       // 已安装微信
      //       if (window.location.href.indexOf('code') > 0) {

      //       } else {
      var path = window.location.origin + window.location.pathname;
      // var path = 'http://qzone.eyee.com' + window.location.pathname
      // alert(encodeURIComponent(path))
      var link = weixinApp.get_authorize_base_link(path, "weixinJ");
      window.location = link;
      //       }
      //     }
      //   document.body.removeChild(ifr);
      // }, 2000)

      // var t1 = Date.now();
      // var ifr = document.createElement("iframe");
      // ifr.setAttribute('src', url);
      // ifr.setAttribute('style', 'display:none');
      // document.body.appendChild(ifr);
      // timeout = setTimeout(function () {
      //   var t2 = Date.now();
      //   if (!t1 || t2 - t1 < t + 10000) {
      //     hasApp = false;
      //   }
      // }, t);
    },
    wx_code() {
      // 微信静默登录返回uid
      if (window.location.href.indexOf("code") > 0) {
        var weixincode = window.location.href
          .split("code=")[1]
          .split("&state")[0];
        api
          .WXRegisterAuth({ wxcode: weixincode })
          .then(res => {
            //获取unionid
            if (res && res.unionid) {
              api
                .LoginOpen({ id: res.unionid, registertype: 0 })
                .then(res => {
                  //第三方登录
                  if (res) {
                    this.$store.dispatch("setUserInfo", res);
                    if (
                      res.mobile == "" ||
                      res.mobile == null ||
                      res.mobile == undefined
                    ) {
                      // 绑定手机号
                      this.showPanel = 4;
                    } else {
                      if (isNaN(res.sex) || (res.sex != 0 && res.sex != 1)) {
                        this.showPanel = 5;
                      } else {
                        this.toast("登录成功");
                        this.setCookie("lastlogin", 1, 365);

                        // let memberPath =
                        //   localStorage.getItem(MemberPathKey) || "/";
                        // this.$router.push(memberPath);

                        if (history.length < 2) {
                          this.$router.push("/");
                        } else history.go(-3); // 跳过授权的历史
                      }
                    }
                  }
                })
                .catch(err => {
                  // 获取用户信息失败，新用户注册
                  this.toast("您还没有注册");
                  this.showPanel = 2;
                });
            }
          })
          .catch(err => {
            this.toast("获取uid失败");
          });

        // alert('code'+weixincode)
        // api.WXRegisterAuth({
        //   WXCode: weixincode
        // }).then((res) => {
        //   // alert('server'+JSON.stringify(res))
        //   if (res.unionid) {
        //     sessionStorage.setItem('uid', res.unionid)
        //     this.loginWX(res.unionid)
        //   }
        // }).catch((err) => {
        //   // this.toast('微信登录失败')
        //   // alert('request'+JSON.stringify(err))
        //   console.log(err)
        // })
      }
    },
    // BaseValue() { // 接口返回背景图片
    //   BaseValue().then((res) => {
    //     if (res) {
    //       this.$store.dispatch('setBaseValue', res)
    //     }
    //   }).catch(e => { console.error('基础数据加载失败', e) })
    // },
    QQLoginPre() {
      var qqJsSdk = dom.createElement("script");
      let url = "https://m.eyee.com/";
      qqJsSdk.src = "//qzonestyle.gtimg.cn/qzone/openapi/qc_loader.js";
      qqJsSdk.setAttribute("data-appid", "1105091322");
      qqJsSdk.setAttribute("data-redirecturi", url);
      qqJsSdk.charset = "utf-8";
      setTimeout(() => {
        dom.head.appendChild(qqJsSdk);
      }, 1000);
    },
    qqLogin() {
      // this.toast("qq登录不可以~")
      // var path = window.location.origin + window.location.pathname
      //         QC.Login.showPopup({
      //    appId:"1105091322",
      //    redirectURI:path
      // })
      // alert(123);
      this.QQLoginPre();
      QC.Login(
        {
          //btnId：插入按钮的节点id，必选
          btnId: "qq",
          //用户需要确认的scope授权项，可选，默认all
          scope: "all",
          //按钮尺寸，可用值[A_XL| A_L| A_M| A_S|  B_M| B_S| C_S]，可选，默认B_S
          size: "A_XL"
        },
        function(reqData, opts) {
          alert(JSON.stringify(reqData));
        }
      ); //登录成功
    },
    gotoBack() {
      // sessionStorage.setItem('flg', '1')
      if (this.showPanel == 1) {
        if (window.history.length < 2) {
          this.$router.replace("/"); // 单独进入时后退到首页
        } else {
          this.$router.go(-1);
          setTimeout(() => {
            if (this.$route.path === "/login") this.$router.replace("/");
          }, 200);
        }
      } else {
        this.showPanel = 1;
      }
    },
    gotoHome() {
      this.$router.push("/");
      // sessionStorage.setItem('flg', '1')
    },
    goToCountry() {
      this.$router.push("country");
    },
    switchLoginStyle() {
      this.pwdValicodeLogin = !this.pwdValicodeLogin;
    },
    changeShowPanel(num) {
      this.showPanel = num;
    },
    decpadleft(val) {
      if (val < 10) return "0" + val;
      else return val;
    },
    loginIn() {
      //登录
      this.errorInfo = "";
      if (
        this.currentCode == "+86" &&
        !Checking(this.loginUser.mobile, "phone")
      ) {
        // this.toast('请输入合法的手机号码')
        this.errorInfo = "请输入合法的手机号码";
        this.focusstate = true;
        console.log(this.focusstate);
        return false;
      }
      this.focusstate = false;
      if (this.pwdValicodeLogin) {
        if (Checking(this.loginUser.password, "validcode")) {
          // this.toast(Checking(this.loginUser.password,'validcode'))
          this.errorInfo = Checking(this.loginUser.password, "validcode");
          return false;
        }
        let paramPhone = {
          mobile: this.currentCode + "-" + this.loginUser.mobile,
          password: MD5(this.loginUser.password)
        };
        api
          .Login(paramPhone)
          .then(res => {
            console.log("login", res);
            if (res) {
              tdAdRegister(res.uid);

              this.toast("登录成功");
              this.$store.dispatch("setUserInfo", res);
              sessionStorage.setItem("flg", "1");
              // localStorage.setItem('currentUser', JSON.stringify(res))
              // if (!res.isbindhobby) {
              //   this.$router.replace('/addUserInfo')
              //   return false
              // } else {
              //   this.$router.go(-1)
              //   // this.$router.push('/')
              //   return false
              // }
              // this.$router.push('/')
              console.log(history.length);
              if (history.length < 2) {
                this.$router.push("/");
              } else this.$router.go(-1); // 单独进入时后退到首页
            }
          })
          .catch(e => {
            console.error("请求异常", e);
            this.errorInfo = e.msg;
            // this.toast(e.msg)
          });
      } else {
        console.log("验证码登录", this.loginUser.validcode);
        if (Checking(this.loginUser.validcode, "validcode")) {
          // this.toast(Checking(this.loginUser.validcode,'validcode'))
          this.errorInfo = Checking(this.loginUser.validcode, "validcode");
          return false;
        }
        let paramCode = {
          mobile: this.currentCode + "-" + this.loginUser.mobile,
          validcode: this.loginUser.validcode
        };
        console.log(paramCode);
        api
          .LoginByCode(paramCode)
          .then(res => {
            console.log("loginByCode", res);
            if (res) {
              tdAdRegister(res.uid);

              this.toast("登录成功"); // 密码登录成功
              // console.log('zsj 登录成功')
              this.$store.dispatch("setUserInfo", res);
              sessionStorage.setItem("flg", "1");
              // localStorage.setItem('currentUser', JSON.stringify(res))
              // if (!res.isbindhobby) {
              //   // 跳转绑定兴趣页面
              //   this.$router.replace('/addUserInfo')
              //   return false
              // } else {
              //   // this.$router.push('/')
              //   this.$router.go(-1)
              //   return false
              // }
              // this.$router.push('/')
              if (history.length < 2) {
                this.$router.push("/");
              } else this.$router.go(-1); // 单独进入时后退到首页
            }
          })
          .catch(e => {
            console.log(e);
            if (e && e.code == 1511532) {
              // this.toast('请发送验证码')
              this.errorInfo = "请发送验证码";
            }
            if (e && e.code == 1511533) {
              // this.toast('无效的验证码')
              this.errorInfo = "无效的验证码";
            }
          });
      }
    },
    registerNum() {
      // 注册
      this.errorInfo = "";
      if (
        this.currentCode == "+86" &&
        !Checking(this.registerUser.mobile, "phone")
      ) {
        // this.toast('请输入合法的手机号码')
        this.errorInfo = "请输入合法的手机号码";
        // this.focusstate = true
        this.reGfocusstate = true;
        return false;
      }
      if (Checking(this.registerUser.validcode, "validcode")) {
        // this.toast(Checking(this.registerUser.validcode,'validcode'))
        this.errorInfo = Checking(this.registerUser.validcode, "validcode");
        return false;
      }
      let option = {
        mobile: this.currentCode + "-" + this.registerUser.mobile,
        validcode: this.registerUser.validcode
      };
      api
        .AdjustRegister(option)
        .then(res => {
          console.log("Register", res);
          if (res) {
            tdAdRegister(res.uid);

            // this.toast('注册成功')
            this.$store.dispatch("setUserInfo", res);
            sessionStorage.setItem("flg", "1");
            // localStorage.setItem('currentUser', JSON.stringify(res))
            this.$router.replace("/sex");
            // if (!res.isbindhobby) {
            //     //跳转绑定兴趣页面
            //     this.$router.replace('/addUserInfo')
            //     return false
            // }
          }
        })
        .catch(e => {
          if (e && e.code == 1511533) {
            // this.toast('请输入正确的验证码')
            this.errorInfo = "请输入正确的验证码";
          } else if (e && e.code == 1511532) {
            // this.toast('请发送验证码')
            this.errorInfo = "请发送验证码";
          }
        });
    },
    thirdLoginNum() {
      // 第三方登录绑定手机号
      this.errorInfo = "";
      if (
        this.currentCode == "+86" &&
        !Checking(this.thirdLoginUser.mobile, "phone")
      ) {
        // this.toast('请输入合法的手机号码')
        this.errorInfo = "请输入合法的手机号码";
        // this.focusstate = true
        this.thdfocusstate = true;
        return false;
      }
      if (Checking(this.thirdLoginUser.validcode, "validcode")) {
        // this.toast(Checking(this.thirdLoginUser.validcode,'validcode'))
        this.errorInfo = Checking(this.thirdLoginUser.validcode, "validcode");
        return false;
      }
      let option = {
        mobile: this.currentCode + "-" + this.thirdLoginUser.mobile,
        validcode: this.thirdLoginUser.validcode
      };
      api
        .AdjustRegister(option)
        .then(res => {
          console.log("Register", res);
          if (res) {
            tdAdRegister(res.uid);

            // this.toast('注册成功')
            this.$store.dispatch("setUserInfo", res);
            sessionStorage.setItem("flg", "1");
            // localStorage.setItem('currentUser', JSON.stringify(res))
            this.showPanel = 5;
          }
        })
        .catch(e => {
          if (e && e.code == 1511533) {
            // this.toast('请输入正确的验证码')
            this.errorInfo = "请输入正确的验证码";
          } else if (e && e.code == 1511532) {
            // this.toast('请发送验证码')
            this.errorInfo = "请发送验证码";
          }
        });
    },
    chooseSexual(sexual) {
      api
        .UpdateInfo({ sex: sexual })
        .then(res => {
          if (res) {
            // let memberPath = localStorage.getItem(MemberPathKey) || "/";
            // this.$router.push(memberPath);
            if (history.length < 2) {
              this.$router.push("/");
            } else this.$router.go(-1); // 单独进入时后退到首页
          }
        })
        .catch(e => {
          console.error("选择性别失败", e);
        });
    },
    getValiCode(type) {
      // 验证码登录
      let _ = this,
        checkMobile = "",
        checkTypes = 2;
      _.errorInfo = "";

      if (type == 1) {
        checkMobile = _.loginUser.mobile;
      } else if (type == 2) {
        checkMobile = _.registerUser.mobile;
        checkTypes = 3;
      } else if (type == 3) {
        checkMobile = _.forgetUser.mobile;
      } else if (type == 4) {
        checkMobile = _.thirdLoginUser.mobile;
      }
      // 验证手机号
      if (_.currentCode == "+86" && !Checking(checkMobile, "phone")) {
        // _.toast('请输入合法的手机号码')
        _.errorInfo = "请输入合法的手机号码";
        _.focusstate = true;
        _.reGfocusstate = true;
        _.thdfocusstate = true;
        _.forfocusstate = true;
        return false;
      }
      var option = {
        checktype: checkTypes,
        mobile: _.currentCode + "-" + checkMobile
      };
      // console.log(option);

      AntiBrush(option, res => {
        if (res) {
          api
            .ValidSendCaptcha(res)
            .then(res => {
              // 发送验证码
              if (!res) {
                console.log(res);
                _.focusstate = false;
                _.reGfocusstate = false;
                _.thdfocusstate = false;
                _.forfocusstate = false;
                var time_secs = 60;
                var tips_word = "";
                _.toast("发送成功");
                // _.$refs.importCode.focus()
                _.timeRun = setInterval(() => {
                  if (time_secs > 1) {
                    time_secs--;
                    tips_word = "已发送" + _.decpadleft(time_secs) + "s";
                    if (type == 1) {
                      _.valiWords = tips_word;
                    } else if (type == 2) {
                      _.regValiWords = tips_word;
                    } else if (type == 3) {
                      _.fogtValiWords = tips_word;
                    } else if (type == 4) {
                      _.thdValiWords = tips_word;
                    }
                  } else {
                    if (type == 1) {
                      _.valiWords = "再次发送";
                    } else if (type == 2) {
                      _.regValiWords = "再次发送";
                    } else if (type == 3) {
                      _.fogtValiWords = "再次发送";
                    } else if (type == 4) {
                      _.thdValiWords = "再次发送";
                    }
                    clearInterval(_.timeRun);
                    _.timeRun = null;
                  }
                }, 1000);
              }
            })
            .catch(e => {
              if (e && e.code == 1511531) {
                _.toast("验证码发送频繁,请60s之后再试");
              } else if (e && e.code == 1511543) {
                _.errorInfo = "新用户请先注册";
                // _.toast('新用户请先注册')
              } else if (e && e.code == 1511544) {
                _.errorInfo = "账号已被注册";
                // _.toast('账号已被注册')
              } else _.toast("验证码发送失败");
            });
        } else _.toast("验证失败了~");
      });
    },
    findPassword() {
      this.errorInfo = "";
      if (
        this.currentCode == "+86" &&
        !Checking(this.forgetUser.mobile, "phone")
      ) {
        // this.toast('请输入合法的手机号码')
        this.errorInfo = "请输入合法的手机号码";
        this.forfocusstate = true;
        return false;
      }
      if (Checking(this.forgetUser.validcode, "validcode")) {
        // this.toast(Checking(this.forgetUser.validcode,'validcode'))
        this.errorInfo = Checking(this.forgetUser.validcode, "validcode");
        return false;
      }
      if (Checking(this.forgetUser.password, "password")) {
        // this.toast(Checking(this.forgetUser.password,'password'))
        this.errorInfo = Checking(this.forgetUser.password, "password");
        return false;
      }
      // 验证密码是否相同
      if (this.forgetUser.password !== this.forgetUser.repassword) {
        // this.toast('两次输入的密码不一致')
        this.errorInfo = "两次输入的密码不一致";
        return false;
      }
      let option = {
        mobile: this.currentCode + "-" + this.forgetUser.mobile,
        validcode: this.forgetUser.validcode,
        password: MD5(this.forgetUser.password)
      };
      api
        .FindPassword(option)
        .then(res => {
          console.log("findPassword", res);
          if (res) {
            this.toast("密码修改成功");
            console.log("找回密码登录成功");
            if (!res.isbindhobby) {
              // 跳转绑定兴趣页面
              console.log("没绑定");
              this.$router.replace("/addUserInfo");
              // return false
            }
            console.log("绑定过");
            this.$store.dispatch("setUserInfo", res);
            // localStorage.setItem('currentUser', JSON.stringify(res))
            this.showPanel = 1;
            this.$router.replace("/login");
          }
        })
        .catch(e => {
          console.error("请求异常", e);
          this.errorInfo = e.msg;
        });
    },
    setCookie(cname, cvalue, exdays) {
      var d = new Date();
      d.setTime(d.getTime() + exdays * 24 * 60 * 60 * 1000);
      var expires = "expires=" + d.toGMTString();
      document.cookie = cname + "=" + cvalue + "; " + expires;
    },
    getCookie(cname) {
      var name = cname + "=";
      var ca = document.cookie.split(";");
      for (var i = 0; i < ca.length; i++) {
        var c = ca[i].trim();
        if (c.indexOf(name) == 0) {
          return c.substring(name.length, c.length);
        }
      }
      return "";
    }
  },
  watch: {
    insq: function(val, oldval) {
      if (val) this.$router.go(-1);
    },
    selectCountryCode: function(val, oldVal) {
      this.currentCode = val;
    },
    showPanel: {
      handler: function(val, oldval) {
        this.errorInfo = "";
      },
      deep: true
    },
    registerUser: {
      handler: function(val, oldval) {
        this.errorInfo = "";
      },
      deep: true
    },
    loginUser: {
      handler: function(val, oldval) {
        this.errorInfo = "";
      },
      deep: true
    },
    thirdLoginUser: {
      handler: function(val, oldval) {
        this.errorInfo = "";
      },
      deep: true
    }
  }
};
</script>
<style scoped>
.btn_arrow > div.closePage {
  border: 0;
  /* margin-left: 21px; */
  width: 40%;
  text-align: right;
  margin-right: 10%;
}
.btn_arrow > div.registReturn {
  border: 0;
  margin-left: 10%;
  width: 40%;
  text-align: left;
}
.closePage span,
.registReturn span {
  display: block;
  width: 100%;
  height: 100%;
  color: #fff;
  font-size: 25px;
  text-align: right;
  line-height: 30px;
}
.registReturn span {
  text-align: left;
}
.login_register {
  width: 100%;
  background-position: center;
  background-size: cover;
  padding-top: 48px;
  font-size: 12px;
  position: relative;
  background-color: #ccc;
}
.btn_arrow > div {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid #fff;
  margin-left: 10px;
}
.logReg_panel {
  position: absolute;
  width: 90%;
  padding: 15px;
  left: 50%;
  top: 50%;
  margin: -50% 0 0 -45%;
  border-radius: 4px;
  z-index: 1;
  /* background: #fff; */
}
.logReg_panel .title_panel {
  text-align: left;
  font-size: 18px;
  color: #fff;
}
form.log_reg label {
  position: relative;
  display: block;
  height: 40px;
  line-height: 40px;
  margin-bottom: 5px;
  color: #999;
  border-bottom: 1px solid #f1f1f1;
  margin-top: 20px;
}
form.log_reg label:nth-child(1) {
  margin-top: 0;
}
form.log_reg label > span.country_code {
  display: inline-block;
  float: left;
  position: relative;
  margin-right: 8px;
  width: 20%;
}
/* form.log_reg label>span.country_code:after{
        content: '';
        position: absolute;
        width: 1px;
        height: 15px;
        right: -4px;
        top: 12px;
        background: #f3f3f3;
    } */
form.log_reg label > span.country_code > em {
  display: inline-block;
  margin-left: 8px;
  width: 0;
  height: 0;
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
  border-top: 8px solid #999;
}
form.log_reg label input {
  background: none;
  color: #fff;
  width: 75%;
  height: 100%;
}
input::-webkit-input-placeholder {
  color: #999;
}
form.log_reg label.labelCur {
  border-bottom: 0;
  margin-top: 20px;
}
form.log_reg label.labelCur input {
  width: 50%;
  height: 100%;
  border-bottom: 1px solid #f1f1f1;
}
.errorInfo {
  margin-bottom: 15px;
}
.errorInfo p.titleP {
  font-family: PingFangSC-Medium;
  font-size: 20px;
  color: #ffffff;
  letter-spacing: 0;
  line-height: 80px;
  text-align: left;
  line-height: 24px;
}
.errorInfo span {
  font-size: 14px;
  color: #e06868;
  letter-spacing: 0;
  line-height: 18px;
  text-align: center;
  line-height: 30px;
  display: block;
  height: 30px;
  text-align: left;
}
.options_log,
.btns_logReg {
  height: 40px;
  line-height: 40px;
}
.options_log > span {
  color: #fff;
}
.options_log span.forg_pwd {
  float: right;
}
.btns_logReg > span {
  display: inline-block;
  float: left;
  border-radius: 4px;
  color: #fff;
  text-align: center;
  font-size: 14px;
}
.btns_logReg span.log_btn {
  width: 70%;
  background: #ffc700;
}
.btns_logReg span.reg_btn {
  float: right;
  width: 27%;
  background: rgba(0, 0, 0, 0.6);
}
.iden_btn {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 80px;
  display: inline-block;
  background: rgba(224, 222, 222, 0.7);
}
.classGetCode {
  position: relative;
}
.classGetCode .iden_btn {
  position: absolute;
  top: 0;
  right: 0;
}
.iden_btn.specialBgCode {
  background: rgba(224, 222, 222, 0.7);
}
.iden_btn.specialBgCode.loginCurrent,
.classGetCode .iden_btn.forgetpassword {
  background: rgba(0, 0, 0, 0.6);
}
.iden_btn.regCurrent {
  background: rgba(0, 0, 0, 0.6);
}
.iden_btn,
.confirm_btn {
  text-align: center;
  font-size: 14px;
  line-height: 40px;
  color: #fff;
  border-radius: 5px;
  width: 110px;
  height: 40px;
}
.confirm_btn {
  background: #ffc700;
  width: 100%;
  margin-top: 30px;
}
.tips_pan {
  text-align: center;
  font-size: 11px;
  color: #999;
  margin: 10px 0;
}
.wx_back > span {
  display: inline-block;
  width: 26px;
  height: 30px;
  text-align: center;
  color: #fff;
  font-size: 23px;
}
.line_left {
  position: absolute;
  bottom: 16vw;
  left: 8.5333vw;
  border-top: #fff solid 1px;
  height: 10vw;
  width: 21.8667vw;
}
.line_right {
  position: absolute;
  bottom: 16vw;
  right: 8.5333vw;
  border-top: #fff solid 1px;
  height: 10vw;
  width: 21.8667vw;
}
.third_login {
  position: absolute;
  bottom: 18vw;
  left: 30vw;
  height: 10vw;
  width: 40vw;
  color: #fff;
  text-align: center;
  font-size: 13px;
}
.login_icon {
  position: absolute;
  bottom: 12vw;
  height: 10vw;
  width: 100vw;
  color: #fff;
  text-align: center;
}
.wx_login {
  position: absolute;
  /* left: 25vw; */
  width: 100%;
  margin: auto;
}
.qq_login {
  position: absolute;
  right: 25vw;
}
.last_login_icon {
  height: 22px;
}
img {
  height: 40px;
}
.login_mask {
  position: fixed;
  z-index: 15;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: inherit;
}
.login_mask::after {
  content: "";
  filter: blur(2px);
  background: inherit;
  position: fixed;
  z-index: 16;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
.login_box {
  z-index: 20;
  position: relative;
  width: 84vw;
  height: 78.6667vw;
  background: rgba(51, 51, 51, 1);
  border-radius: 16px;
  padding: 5.3333vw;
}
.close_btn {
  position: absolute;
  top: 3.3333vw;
  right: 3.8667vw;
  height: 7.2vw;
}
.third_titleP {
  font-family: PingFangSC-Medium;
  font-size: 18px;
  color: #ffffff;
  letter-spacing: 0;
  text-align: center;
  margin-top: 2.6667vw;
}
.third_error {
  font-size: 10px;
  color: #c73c3c;
  display: block;
  height: 4.5333vw;
  margin: 2.6667vw 0 3.2vw 0;
  text-align: left;
}
.third_tips_pan {
  text-align: left;
  font-size: 12px;
  color: #d8d8d8;
  margin: 0;
}
.third_tips_pan span,
.reg-privacy span {
  color: #ffc700;
}
.third_btn {
  text-align: center;
  font-size: 16px;
  line-height: 35px;
  color: #fff;
  border-radius: 5px;
  width: 73.3333vw;
  height: 9.3333vw;
  background: #ffc700;
  margin-top: 5.0667vw;
}
.sexual_box {
  z-index: 20;
  width: 84vw;
  height: 58.6667vw;
  background: rgba(51, 51, 51, 1);
  border-radius: 16px;
  padding: 5.0667vw 5.3333vw 3.7333vw 5.3333vw;
}
.sexual_titleP {
  font-family: PingFangSC-Medium;
  font-size: 18px;
  color: #ffffff;
  letter-spacing: 0;
  text-align: center;
  margin: 0;
}
.sexual_info {
  text-align: center;
  font-size: 14px;
  color: #d8d8d8;
  margin: 1.3333vw 0 6.4vw;
}
.sexual_m {
  float: left;
  text-align: center;
}
.sexual_f {
  float: right;
  text-align: center;
}
.sexual_icon {
  height: 17.3333vw;
}
.sexual_btn {
  text-align: center;
  font-size: 16px;
  line-height: 35px;
  color: #fff;
  border-radius: 5px;
  width: 34.1333vw;
  height: 9.3333vw;
  background: #ffc700;
  margin-top: 3.4667vw;
}
</style>